.zs-alert {
  padding: $alert-padding-x $alert-padding-y;
  text-align: left;
  margin: $alert-margin-x $alert-margin-y;
  border-radius: $border-radius;
  &-title {
    color: $gray-900;
    font-size: $font-size-lg;
    overflow: hidden;
    display: flex;
    justify-content:space-between
  }
  &-message {
    color: $gray-700;
    font-size: $font-size-base;
  }
}

.zs-alert-default {
  border: 1px solid $blue;
  background-color: rgba($color: $blue, $alpha: 0.2);
}

.zs-alert-success {
  border: 1px solid $green;
  background-color: rgba($color: $green, $alpha: 0.2);
}

.zs-alert-danger {
  border: 1px solid $red;
  background-color: rgba($color: $red, $alpha: 0.2);
}

.zs-alert-warning{
  border: 1px solid $yellow;
  background-color: rgba($color: $yellow, $alpha: 0.2);
}

.zs-alert-open{
  display: block;
  font-size: $font-size-sm;
  cursor: pointer;
}

.zs-alert-close{
  display: none;
}
